<template>
  <div class="app-container">
    <!-- 条件搜索 -->
    <el-form
      ref="searchFormRef"
      :model="queryData"
      :inline="true"
      class="globalSerchFormStyle"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="地区" prop="district">
            <el-select
              v-model="queryData.district"
              placeholder="请选择地区"
              size="small"
              filterable
              clearable
              style="width: 190px"
            >
              <el-option
                v-for="(item, index) in areaList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="团队名称" prop="teamName">
            <el-input
              v-model="queryData.teamName"
              size="small"
              placeholder="请输入团队名称"
              clearable
              style="width: 190px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="负责人" prop="leaderId">
            <el-select
              v-model="queryData.leaderId"
              placeholder="请选择负责人"
              size="small"
              filterable
              clearable
              style="width: 190px"
            >
              <el-option
                v-for="item in userList"
                :key="item.userId"
                :label="item.nickName"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建时间" prop="createdTime">
            <el-date-picker
              v-model="dateRangeCreatedDate"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              value-format="yyyy-MM-dd HH:mm:ss"
              clearable
              style="width: 190px"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row class="global_el_rowStyle" :gutter="10">
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="handleQuery"
        >
          搜索
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-refresh"
          plain
          @click="resetQuery"
        >
          重置
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button plain size="mini" icon="el-icon-plus" @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          size="mini"
          plain
          icon="el-icon-delete"
          :disabled="selectionList.length < 1"
          @click="handleDelAll"
          >批量删除</el-button
        >
      </el-col>
    </el-row>
    <!--表格 -->
    <el-table
      stripe
      v-loading="loading"
      ref="teamTable"
      :data="teamList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        align="left"
        width="
      80"
      />
      <el-table-column prop="districtName" label="地区" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="teamName" label="团队名称" show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="leader"
        label="负责人"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="memberInfos"
        label="团队成员"
        :formatter="usersForMatter"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="createdDate"
        label="创建时间"
        show-overflow-tooltip
        sortable
        width="150"
      ></el-table-column>
      <el-table-column
        prop="updateTime"
        label="操作时间"
        show-overflow-tooltip
        sortable
        width="150"
      ></el-table-column>
      <el-table-column
        label="操作"
        show-overflow-tooltip
        fixed="right"
        width="150"
      >
        <template v-slot="{ row }">
          <el-button type="text" @click="handleView(row)">查看</el-button>
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="fr"
      style="margin-top: 8px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <teamFormVue ref="teamFormRef" :parm="params" @getData="getData" />
  </div>
</template>
<script>
import { teamList, userList, deleteTeam } from "@/api/team-management";
import teamFormVue from "./team-form.vue";
import { cloneDeep } from "lodash";

export default {
  components: { teamFormVue },
  data() {
    return {
      queryData: {
        teamName: undefined,
        district: undefined,
        leaderId: undefined,
      },
      areaList: [
        {
          label: "华北地区",
          value: "1",
        },
        {
          label: "华南地区",
          value: "2",
        },
        {
          label: "西南地区",
          value: "3",
        },
        {
          label: "西北地区",
          value: "4",
        },
        {
          label: "东北地区",
          value: "5",
        },
      ],
      dateRangeCreatedDate: [],
      loading: false,
      teamList: [],
      selectionList: [],
      page: 1,
      pageSize: 10,
      total: 0,
      params: {},
      userList: [],
    };
  },
  methods: {
    // 新增
    async handleAdd() {
      let res = await userList({ level: 1 });
      let res2 = await userList({ level: 2 });
      this.params = {
        drawerShow: true,
        drawerType: "new",
        teamData: {},
        settingData: {
          areaList: this.areaList,
          memberList: res2.data || [],
          teamList: res.data || [],
        },
      };
    },
    // 批量删除
    handleDelAll() {
      console.log(this.selectionList);
      this.$confirm(`确认删除勾选的团队吗？`).then(() => {
        let ids = this.selectionList.map((item) => item.id);
        deleteTeam(ids).then((res) => {
          if (res && res.code === 200) {
            this.$message.success(res.msg);
            this.selectionList = [];
            this.getData();
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
    // 查看
    async handleView(row) {
      if (row.members) {
        row.member = row.members.split(",");
        row.member = row.member.map((item) => {
          return parseInt(item);
        });
      }
      if (row.district) {
        row.district = row.district + "";
      }
      let res = await userList({ level: 1 });
      let res2 = await userList({ level: 2 });
      this.params = {
        drawerShow: true,
        drawerType: "view",
        teamData: cloneDeep(row),
        settingData: {
          areaList: this.areaList,
          memberList: res2.data || [],
          teamList: res.data || [],
        },
      };
    },
    // 编辑
    async handleEdit(row) {
      if (row.members) {
        row.member = row.members.split(",");
        row.member = row.member.map((item) => {
          return parseInt(item);
        });
      }
      if (row.district) {
        row.district = row.district + "";
      }
      let res = await userList({ level: 1 });
      let res2 = await userList({ level: 2 });
      this.params = {
        drawerShow: true,
        drawerType: "edit",
        teamData: cloneDeep(row),
        settingData: {
          areaList: this.areaList,
          memberList: res2.data || [],
          teamList: res.data || [],
        },
      };
    },
    getData() {
      if (this.loading) return;
      this.loading = true;
      this.addDateRange(this.queryData, this.dateRangeCreatedDate);
      let queryData = this.getQueryData(this.queryData);
      queryData = Object.assign(
        {
          pageNum: this.page,
          pageSize: this.pageSize,
        },
        queryData
      );
      teamList(queryData).then((res) => {
        if (res && res.code == 200) {
          this.teamList = res.rows;
          this.total = res.total;
        } else {
          this.teamList = [];
          this.total = 0;
        }
      });
      this.loading = false;
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getData();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.getData();
    },
    handleSelectionChange(selection) {
      this.selectionList = selection;
    },
    handleQuery() {
      this.getData();
    },
    resetQuery() {
      this.$refs["searchFormRef"].resetFields();
      this.dateRangeCreatedDate = [];
      this.getData();
    },
    getQueryData(data) {
      let queryData = data;
      Object.keys(queryData).forEach((key) => {
        if (queryData[key] === "" || queryData[key] === undefined) {
          queryData[key] = null;
        }
      });
      return queryData;
    },
    usersForMatter(row) {
      let str = "";

      if (row.memberInfos) {
        row.memberInfos.forEach((item) => {
          if (!item) return;
          str += `${item.nickName},`;
        });
      }
      return str.slice(0, -1);
    },
  },
  created() {
    this.getData();
    userList({ level: 1 }).then((res) => {
      this.userList = res.data || [];
    });
  },
};
</script>
<style scoped></style>
